<template>
  <div>
    <div class="box">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="开始日期">
          <el-date-picker v-model="formInline.beginTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker v-model="formInline.endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="primary" @click="onExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="contactId"
            label="ID"
            width="80">
          </el-table-column>
          <el-table-column
            prop="contactName"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="company"
            label="公司"
            width="180">
          </el-table-column>
          <el-table-column
            prop="position"
            label="职务">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="咨询时间">
          </el-table-column>
          <el-table-column
            prop="question"
            label="咨询问题">
          </el-table-column>
          <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
        </el-table>
    </div>

    <div style="margin: 10px;">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageNum"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {uploadServerURL} from '@/config'
  import {getContactUserByPage} from '@/api/news.js'
  export default {
    name: 'Resource',
    data() {
      return {
        remoteServerUrl: uploadServerURL,
        tableData: [],
        total: 0,
        pageSize: 10,
        pageNum: 1,
        formInline: {
          beginTime: null,
          endTime: null,
        },
      }
    },
    mounted() {
      this.loadList()
    },
    methods: {
      loadList() {
        let param = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          id: 1,
        }
        getContactUserByPage(param).then(res => {
          console.log('getContactUserByPage', res);
          if(res.code == 200) {
            this.tableData = res.data.records
            this.pageNum = res.data.current
            this.pageSize = res.data.size
            this.total = res.data.total
          }
        })
      },
      handleDelete(index, row) {
        console.log('handleDelete', row)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNum = val
        this.loadList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.loadList()
      },
      onSearch() {

      },
      onExport() {
        // 下载文件
        let url = `${this.remoteServerUrl}/contact/export/1/${this.formInline.beginTime}/${this.formInline.endTime}`
        const el = document.createElement('a');
        el.style.display = 'none';
        el.setAttribute('target', '_blank');
        el.setAttribute('download', 'fileName');
        el.href = url;
        console.log(el);
        document.body.appendChild(el);
        el.click();
        document.body.removeChild(el);
      },
      formatterFileSize(row, column) {
        let fileSize = row.fileSize
        var arrUnit = ["B", "K", "M", "G", "T", "P"],
        		baseStep = 1024,
        		unitCount = arrUnit.length,
        		unitIndex = 0;
        	while(fileSize >= baseStep && unitIndex < unitCount - 1){
        		unitIndex++;
        		fileSize /= baseStep;
        	}
        	fileSize = fileSize.toFixed(2);
        	return fileSize + " " + arrUnit[unitIndex];
      }
    }
  }
</script>

<style>
  .box {
    margin: 10px;
  }
</style>
